<template>
  <div id="tablecom" ref="height_page">
    <div class="form-block" ref="height_option">
      <el-autocomplete
        class="inline-input search-input"
        prefix-icon="el-icon-search"
        clearable
        v-model="searchinput"
        :fetch-suggestions="querySearch"
        size="small"
        placeholder="请输入内容"
        :trigger-on-focus="true"
        @select="handleSelectInput"
      ></el-autocomplete>
    </div>
    <!-- <el-scrollbar class="form-component__scroll"> -->
    <div ref="height_table" class="form-component__scroll">
      <!-- 返回顶部组件 -->
      <!-- <template>
        <el-backtop target=".form-component__scroll .el-scrollbar__wrap" :bottom="60"></el-backtop>
      </template> -->
      
      <!-- :default-sort 设置默认排序 height="600" -->
      <el-table ref="multipleTable" :height="tableHeight" :data="typesList" tooltip-effect="dark" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" 
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" sortable width="80"></el-table-column>
        <el-table-column label="所属分类" width="160">
          <template slot-scope="scope">
            {{ scope.row.category_type }} / {{ scope.row.category_name }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="电话名称" width="120"></el-table-column>
        <el-table-column prop="phone" label="电话号码" width="120"></el-table-column>
        <el-table-column prop="address" label="电话所属地址" width="180"></el-table-column>
        <el-table-column prop="add_time" label="添加日期" sortable width="120"></el-table-column>
        <el-table-column prop="update_time" label="修改日期" sortable></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1" :inactive-value="0"
              active-color="#13ce66" inactive-color="#ff4949"
              >
            </el-switch>
            {{ scope.row.status==1?'启用':'禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" title="编辑"></el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" title="删除"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
    </div>
    <!-- </el-scrollbar> -->
    <div ref="height_paging">
      <paging :formconfig="formConfig" v-on:handle-current="listenCurrent" v-on:handle-size="listenSize" ref="mychild"></paging>
    </div>
  </div>
</template>

<script>
import paging from "@/components/paging"
import Mock from '../mock'
import { telList } from "../api/api";

export default {
  name: "tablecom",
  data() {
    return {
      // 分页器配置
      restaurants: [],
      searchinput: "",
      formConfig: {
        current: 1,
        length: 299,
        pagesizes: [20, 50, 100, 200],
        pagesize: 50
      },
      multipleSelection: [],
      // 表格高度
      tableHeight: 600,
      // 分类列表
      typesList: [],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      // console.log(restaurants)
      console.log(results)
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "Mderci Paul时刻了", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "Mdfsi发的时刻了", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "M山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "M山王（西百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "M山", "address": "上海市普陀区棕榈路" }
      ];
    },
    handleSelectInput(item) {
      
      console.log(item);
    },
    listenCurrent(something){
      this.pageNum = something;
      // this._synchron();
      console.log(this.pageNum);
    },
    listenSize(something){
      this.pageNum = something;
      // this._synchron();
      console.log(this.pageNum);
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    //   var _this = this,item = {index: 1,date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"};
    //   _this.tableData = Array(_this.formConfig.pagesize).fill(item);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
    // 选中及取消
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  mounted() {
    let that = this;
    // 搜索模拟数据
    this.restaurants = this.loadAll();
    // 表格高度
    this.$nextTick(()=>{ // 页面渲染完成后的回调
      var pagetHe = this.$refs.height_page.offsetHeight;
      var optionHe = this.$refs.height_option.offsetHeight;
      var pagingHe = this.$refs.height_paging.offsetHeight;
      this.tableHeight = pagetHe - optionHe - pagingHe;
      console.log(pagetHe,optionHe,pagingHe);
    })
  },
  created() {
    var that = this;
    // 获取参数
    // let ParamsKey = that.$route.params.key;
    // console.log(ParamsKey);
    
    Mock.datatel();
    // Mock.datatel();
    telList().then(data => {
      let { mocktel, code } = data;
      if (code == "200") {
        console.log(mocktel)
        this.typesList = mocktel.list;
      } else {
        this.$message({
          message: "请求失败",
          type: "error"
        });
      }
    });
  },
  components:{
    "paging": paging,
  }
};
</script>
